import Taro, { Component, Config } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import './index.less'

import navIcon from '../../asset/nav-icon.png';
import navIconH from '../../asset/nav-icon-h.png';
import navIconM from '../../asset/nav-icon-m.png';
import navIconB from '../../asset/nav-icon-b.png';
import navIconN from '../../asset/nav-icon-n.png';
import navIconE from '../../asset/nav-icon-e.png';

export default class HotList extends Component{

    componentWillMount () { }

    componentDidMount () { }
  
    componentWillUnmount () { }
  
    componentDidShow () { }
  
    componentDidHide () { }
    

    config: Config = {

    }

    state = {

        list: [

            {
                label: '新品',
                path: '/?id=123',
                url: navIcon
            },
            {
                label: '咖啡',
                path: '/?id=123',
                url: navIconM
            },
            {
                label: '星冰乐',
                path: '/?id=123',
                url: navIconH
            },
            {
                label: '果汁',
                path: '/?id=123',
                url: navIconB
            },
            {
                label: '糕点',
                path: '/?id=123',
                url: navIconN
            },
            {
                label: '饼干',
                path: '/?id=123',
                url: navIconE
            }
            
        ]
        
    }

    render(){

        let { list } = this.state;

        return (

            <View className="hot-list">

                <View className="hot-list-header">
                    <Text className="en-sub">
                        Poplular
                    </Text>
                    <Text className="title">
                        正在热销
                    </Text>
                </View>
              
                <View className="hot-list-body">
                  {list.map((item, index) =>{

                    return (

                        <View className="hot-list-item" key={index} data-path={item.path} >
                        
                            <View className="item-content">

                                <View className="icon">
                                    <Image mode='aspectFill' className='img' src={item.url}></Image>
                                </View>

                                <Text className="label">
                                    {item.label}
                                </Text>
                                
                            </View>
                        
                        </View>
                        
                    )
                      
                  })}
                </View>

            </View>
            
        )
        
    }
    
    
}